import 'package:flutter/material.dart';

/// Flutter布局示例
class LayoutExample extends StatefulWidget {
  const LayoutExample({super.key});

  @override
  State<LayoutExample> createState() => _LayoutExampleState();
}

class _LayoutExampleState extends State<LayoutExample> {
  String _selectedLayout = 'column_row';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter 布局'), backgroundColor: Theme.of(context).colorScheme.inversePrimary),
      body: Column(
        children: [
          // 布局选择器
          Container(
            padding: const EdgeInsets.all(8),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Wrap(
                spacing: 8,
                children: [
                  ChoiceChip(
                    label: const Text('Column/Row'),
                    selected: _selectedLayout == 'column_row',
                    onSelected: (selected) {
                      setState(() => _selectedLayout = 'column_row');
                    },
                  ),
                  ChoiceChip(
                    label: const Text('Stack'),
                    selected: _selectedLayout == 'stack',
                    onSelected: (selected) {
                      setState(() => _selectedLayout = 'stack');
                    },
                  ),
                  ChoiceChip(
                    label: const Text('Container'),
                    selected: _selectedLayout == 'container',
                    onSelected: (selected) {
                      setState(() => _selectedLayout = 'container');
                    },
                  ),
                  ChoiceChip(
                    label: const Text('Flex/Expanded'),
                    selected: _selectedLayout == 'flex',
                    onSelected: (selected) {
                      setState(() => _selectedLayout = 'flex');
                    },
                  ),
                  ChoiceChip(
                    label: const Text('Wrap'),
                    selected: _selectedLayout == 'wrap',
                    onSelected: (selected) {
                      setState(() => _selectedLayout = 'wrap');
                    },
                  ),
                ],
              ),
            ),
          ),
          const Divider(height: 1),
          Expanded(
            child: SingleChildScrollView(padding: const EdgeInsets.all(16), child: _buildSelectedLayout()),
          ),
        ],
      ),
    );
  }

  Widget _buildSelectedLayout() {
    switch (_selectedLayout) {
      case 'column_row':
        return _buildColumnRowDemo();
      case 'stack':
        return _buildStackDemo();
      case 'container':
        return _buildContainerDemo();
      case 'flex':
        return _buildFlexDemo();
      case 'wrap':
        return _buildWrapDemo();
      default:
        return const SizedBox();
    }
  }

  Widget _buildColumnRowDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text('Column 和 Row', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Text('Column垂直排列，Row水平排列子Widget。'),
        const SizedBox(height: 16),

        // Column示例
        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Column（垂直布局）', style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  height: 200,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blue),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      _buildColorBox(Colors.red, '子元素 1'),
                      _buildColorBox(Colors.green, '子元素 2'),
                      _buildColorBox(Colors.blue, '子元素 3'),
                    ],
                  ),
                ),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(4)),
                  child: const Text('''Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Widget1,
    Widget2,
    Widget3,
  ],
)''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        // Row示例
        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Row（水平布局）', style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  height: 100,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.orange),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [_buildColorBox(Colors.purple, '1'), _buildColorBox(Colors.teal, '2'), _buildColorBox(Colors.pink, '3')],
                  ),
                ),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(4)),
                  child: const Text('''Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [Widget1, Widget2, Widget3],
)''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        // 对齐方式说明
        Card(
          color: Colors.amber.shade50,
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('主轴对齐 (MainAxisAlignment):', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('• start - 起始位置'),
                Text('• end - 结束位置'),
                Text('• center - 居中'),
                Text('• spaceBetween - 两端对齐，子元素之间有间隔'),
                Text('• spaceAround - 子元素周围有间隔'),
                Text('• spaceEvenly - 均匀分布'),
                SizedBox(height: 8),
                Text('交叉轴对齐 (CrossAxisAlignment):', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('• start - 起始位置'),
                Text('• end - 结束位置'),
                Text('• center - 居中'),
                Text('• stretch - 拉伸填充'),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildStackDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text('Stack（层叠布局）', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Text('Stack可以将子Widget层叠摆放，类似CSS的absolute定位。'),
        const SizedBox(height: 16),

        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('基本Stack示例', style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  height: 250,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.purple),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Stack(
                    children: [
                      // 背景
                      Container(color: Colors.blue.shade100),
                      // 左上角
                      Positioned(
                        top: 10,
                        left: 10,
                        child: Container(
                          padding: const EdgeInsets.all(12),
                          color: Colors.red,
                          child: const Text('top: 10\nleft: 10', style: TextStyle(color: Colors.white)),
                        ),
                      ),
                      // 右下角
                      Positioned(
                        bottom: 10,
                        right: 10,
                        child: Container(
                          padding: const EdgeInsets.all(12),
                          color: Colors.green,
                          child: const Text('bottom: 10\nright: 10', style: TextStyle(color: Colors.white)),
                        ),
                      ),
                      // 居中
                      Center(
                        child: Container(
                          padding: const EdgeInsets.all(20),
                          decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.circular(8)),
                          child: const Text('居中', style: TextStyle(color: Colors.white, fontSize: 18)),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(4)),
                  child: const Text('''Stack(
  children: [
    Container(color: Colors.blue), // 背景
    Positioned(
      top: 10,
      left: 10,
      child: Widget1,
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Widget2,
    ),
    Center(child: Widget3),
  ],
)''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        Card(
          color: Colors.purple.shade50,
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('常用场景：', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('• 图片上叠加文字或图标'),
                Text('• 徽章（Badge）显示'),
                Text('• 浮动按钮覆盖'),
                Text('• 自定义复杂布局'),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildContainerDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text('Container（容器）', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Text('Container是最常用的布局Widget，可以设置padding、margin、装饰等。'),
        const SizedBox(height: 16),

        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Container属性演示', style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  width: double.infinity,
                  margin: const EdgeInsets.all(8),
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.blue.shade100,
                    border: Border.all(color: Colors.blue, width: 3),
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.2), blurRadius: 8, offset: const Offset(0, 4))],
                  ),
                  child: const Text('带装饰的Container', style: TextStyle(fontSize: 16), textAlign: TextAlign.center),
                ),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(4)),
                  child: const Text('''Container(
  width: double.infinity,
  margin: EdgeInsets.all(8),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue.shade100,
    border: Border.all(color: Colors.blue, width: 3),
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Text('带装饰的Container'),
)''', style: TextStyle(fontFamily: 'monospace', fontSize: 11)),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        // 多种Container样式
        const Text('不同样式：', style: TextStyle(fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        Row(
          children: [
            Expanded(
              child: Container(
                height: 80,
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(colors: [Colors.purple, Colors.blue]),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Center(
                  child: Text('渐变', style: TextStyle(color: Colors.white)),
                ),
              ),
            ),
            Expanded(
              child: Container(
                height: 80,
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(color: Colors.orange, shape: BoxShape.circle),
                child: const Center(
                  child: Text('圆形', style: TextStyle(color: Colors.white)),
                ),
              ),
            ),
            Expanded(
              child: Container(
                height: 80,
                margin: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: const BorderRadius.only(topLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
                ),
                child: const Center(
                  child: Text(
                    '部分圆角',
                    style: TextStyle(color: Colors.white, fontSize: 12),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildFlexDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text('Flex 和 Expanded', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Text('Expanded和Flexible用于在Row/Column中分配空间。'),
        const SizedBox(height: 16),

        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Expanded示例', style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  height: 80,
                  decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 1,
                        child: Container(
                          color: Colors.red.shade200,
                          child: const Center(child: Text('flex: 1')),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                          color: Colors.green.shade200,
                          child: const Center(child: Text('flex: 2')),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Container(
                          color: Colors.blue.shade200,
                          child: const Center(child: Text('flex: 1')),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(4)),
                  child: const Text('''Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2, // 占用2倍空间
      child: Container(color: Colors.green),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        Card(
          color: Colors.teal.shade50,
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Expanded vs Flexible:', style: TextStyle(fontWeight: FontWeight.bold)),
                SizedBox(height: 8),
                Text('• Expanded: 强制占满剩余空间'),
                Text('• Flexible: 根据需要占用空间'),
                Text('• flex: 分配比例（默认1）'),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildWrapDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text('Wrap（自动换行）', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        const Text('Wrap会在空间不足时自动换行，类似网页的流式布局。'),
        const SizedBox(height: 16),

        Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Wrap示例', style: TextStyle(fontWeight: FontWeight.bold)),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Wrap(
                    spacing: 8,
                    runSpacing: 8,
                    children: List.generate(
                      12,
                      (index) =>
                          Chip(label: Text('标签 ${index + 1}'), backgroundColor: Colors.primaries[index % Colors.primaries.length].shade100),
                    ),
                  ),
                ),
                const SizedBox(height: 12),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(4)),
                  child: const Text('''Wrap(
  spacing: 8,        // 主轴间距
  runSpacing: 8,     // 交叉轴间距
  children: [
    Chip(label: Text('标签 1')),
    Chip(label: Text('标签 2')),
    Chip(label: Text('标签 3')),
    // ...
  ],
)''', style: TextStyle(fontFamily: 'monospace', fontSize: 12)),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 16),

        Card(
          color: Colors.orange.shade50,
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('使用场景：', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('• 标签云'),
                Text('• 筛选条件'),
                Text('• 图片网格（不定宽度）'),
                Text('• 响应式布局'),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildColorBox(Color color, String text) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(4)),
      child: Text(text, style: const TextStyle(color: Colors.white)),
    );
  }
}
